<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>index</title>
    <link rel="stylesheet" href="scripts/lib/marked/style-github.css" />

</head>

<body>
    <div class="root markdown-body" id="root"></div>
    <script src="scripts/lib/marked/marked.js"></script>
    <script>
        const get = (url) =>
            new Promise((resolve, reject) => {
                let xhr = new XMLHttpRequest();
                xhr.open("GET", url, true);
                xhr.setRequestHeader("Content-Type", "text/markdown");
                xhr.send();
                xhr.onload = () => resolve(xhr.responseText);
                xhr.onerror = (error) => reject(error);
            });

        const renderer = {
            heading(text, level) {
                return `
                    <h${level}>
                        <span>${text}</span>
                        <a class="anchor" name="${text}" href="#${text}">
                            <span class="octicon-link"></span>
                        </a>
                    </h${level}>`;
            },
            image(href, title, text) {
                var docPath = location.search.split("?p=")[1];
                var docBase = docPath.substring(0, docPath.lastIndexOf("/")+1);
                return `<img src="${docBase + href}" alt="${text}" />`;
            }
        };
        marked.use({ renderer });

        const changeMenuItem2Link = () => {
            var arr = Array.prototype.slice.call(document.querySelectorAll("h2"));
            var menu = arr.find(x => x.innerText === "目录");
            if (menu === null || menu === undefined) { return; }
            var ol = menu.nextElementSibling;
            list = Array.prototype.slice.call(ol.children);
            list.forEach((v, i) => {
                if (v.childNodes.length > 1 && v.childNodes[1].tagName === "OL") {
                    var htmlText = `<span><a href="${i + 1}/index.html">${v.childNodes[0].textContent}</a> | <a href="?p=${i + 1}/readme.md">readme.md</a></span><ol>`;
                    var ol2 = v.childNodes[1];
                    var list2 = Array.prototype.slice.call(ol2.children);
                    list2.forEach((v2, j) => {
                        htmlText += `<li><a href="${i + 1}.${j + 1}/index.html">${v2.innerText}</a> | <a href="?p=${i + 1}.${j + 1}/readme.md">readme.md</a></li>`;
                    });
                    htmlText += "</ol>";
                    v.innerHTML = htmlText;
                } else {
                    v.innerHTML = `<a href="${i + 1}/index.html">${v.innerText}</a> | <a href="?p=${i + 1}/readme.md">readme.md</a>`;
                }

            })
        };

        var root = document.querySelector("#root");
        var path = "readme.md";
        if (location.search.length > 0) {
            path = location.search.split("?p=")[1];
        }
        path += "?!skip";
        get(path)
            .then((data) => {
                root.innerHTML = marked(data);
                changeMenuItem2Link();
                //页面渲染后更改hash用于重新定位锚点
                var hash = location.hash;
                location.hash = "";
                location.hash = hash;
            });
    </script>
</body>

</html>